import React from 'react'
import { connect } from 'mirrorx'
import Title from 'component/title'
import BlockItem from './block-item'
// import BenefitBox from './benefit-box'

import { Button, Icon } from 'antd-mobile'

class App extends React.Component {
  constructor (props) {
    super(props)

    this.addItemAction = this.addItemAction.bind(this)
    this.deleteItemAction = this.deleteItemAction.bind(this)

    this.state = {
      unfoldMap: {flag: false},
      insurantNames: [],
      dataList: this.getInitDataList(props.initValueObj && props.initValueObj[2])
    }

    this.tempLen = this.state.dataList.length
  }

  componentWillReceiveProps (nextProps) {
    if (JSON.stringify(nextProps.initValueObj) !== JSON.stringify(this.props.initValueObj)) {
      this.setInitDataList(nextProps.initValueObj && nextProps.initValueObj[2])
    }
  }

  componentDidMount () {
    this.setState({
      unfoldMap: {
        flag: true,
        id: this.state.dataList[0] && this.state.dataList[0].id
      }
    })
  }

  getInitDataList (initValueArr) {
    if (initValueArr) {
      return initValueArr.map((item, index) => { return {id: index + 1, values: item} })
    } else {
      return [{id: 1}]
    }
  }

  setInitDataList (initValueArr) {
    if (!initValueArr || (initValueArr && initValueArr.length === 0)) {
      return
    }

    let dataList = this.getInitDataList(initValueArr)
    if (this.tempLen < dataList.length) {
      this.tempLen = dataList.length
    }

    this.setState({dataList})
  }

  getBlockItemIndexTitle (itemIndex, item) {
    const {dataList, unfoldMap} = this.state
    const {step} = this.props
    let flag = dataList.length > 1
    let isUnfold = unfoldMap.flag === true && unfoldMap.id === item.id // 是否是展开的那一项
    if (step !== 1) {
      isUnfold = true
    }
    let foldText = isUnfold ? '折叠' : '展开'
    let foldClass = isUnfold ? <Icon type='up' /> : <Icon type='down' />
    return (
      <div className='bor-bottom'>
        <div className='index clearfix'>
          <label>受保人<span className='index-text'>{itemIndex + 1}</span></label>

          {step === 1 &&
            <span className='fold fr' onClick={() => this.titleClick(item.id)}>
              {foldText}<span >{foldClass}</span>
            </span>
          }

          {flag && step === 1 &&
            <span className='fr' onClick={() => this.deleteItemAction(item.id)}>删除<i className='icon-shanchu' /></span>
          }
        </div>
      </div>
    )
  }

  // 添加受保人
  addItemAction () {
    this.tempLen++
    this.setState((oldState) => Object.assign(oldState, {
      dataList: [...oldState.dataList, ...[{id: this.tempLen}]],
      unfoldMap: {flag: true, id: this.tempLen}
    }), () => {
      this.toViewAction()
    })
  }

  toViewAction () {
    setTimeout(() => {
      let insuranceBox = T.get('insuranceBox')
      let index = this.state.dataList.length - 1
      let dom = insuranceBox.querySelectorAll('.block-item')[index]
      if (dom) {
        let targetDom = dom.querySelector('.index') || dom
        targetDom.scrollIntoView && targetDom.scrollIntoView()
      }
    }, 0)
  }

  // 删除受保人
  deleteItemAction (id) {
    if (this.state.dataList.length <= 1) {
      return
    }

    let dataList = this.state.dataList
    dataList = dataList.filter((item) => {
      return item.id !== id
    })
    this.setState({dataList})
  }

  titleClick (id) {
    let {unfoldMap} = this.state
    let flag
    if (unfoldMap.id !== id) {
      flag = true
    } else {
      flag = !unfoldMap.flag
    }

    this.setState(
      {unfoldMap: {flag, id}}
    )
    // this.setInsurantNames()
  }

  setInsurantNames () {
    const { getFieldValue } = this.props.form
    const {dataList} = this.state
    let names = []

    dataList.forEach((item) => {
      let key = 'firstname_2_' + item.id
      let name = getFieldValue(key)
      if (name) {
        names.push(name)
      }
    })
    this.setState({insurantNames: names})
  }

  render () {
    const {step, form, trialPrice} = this.props
    const {dataList, unfoldMap} = this.state
    const Lang = window.LangMessage || {}
    return (
      <div className=''>
        <Title title={Lang.insurant_info || '受保人信息'} step={step} />

        <div className='section-content pt10' id='insuranceBox'>
          {dataList.map((item, index) => {
            let isUnfold = unfoldMap.flag === true && unfoldMap.id === item.id // 是否是展开的那一项
            return <div key={item.id} className='block-item'>
              {/* {this.getBlockItemIndexTitle(index, item)} */}
              <div className={isUnfold ? '' : 'none'}>
                <BlockItem
                  step={step}
                  form={form}
                  trialPrice={trialPrice}
                  type={2}
                  initValueArr={this.props.initValueObj && this.props.initValueObj[2]}
                  blockItem={item}
                  itemIndex={index}
                />
                {/* <BenefitBox
                  sid={item.id}
                  step={this.props.step}
                  initValueArr={item.values && item.values.benefits}
                  benefitType={item.values && item.values.benefitType}
                  form={this.props.form}
                /> */}
              </div>
            </div>
          })}

          {/* {step === 1 &&
          <div className='mt40'>
            <Button onClick={this.addItemAction}>+ 添加受保人</Button>
          </div>
          } */}
        </div>
      </div>
    )
  }
}

export default connect(state => {
  return {initValueObj: state.insureModel.initValueObj}
})(App)
